
Vue.component('time-picker', {
    template: '#time-picker-template',
    data: function() {
        return {
            show: false,
            timeText: 'aaa',
            styleValue: '',
            style: {
                border: 'solid 2px',
                position: 'absolute',
                width: '25em',
                height: '20em',
                'background-color': '#FFFFFF',
                display: 'none',
                padding: '1em',
                top: '0px',
                left: '0px',
                'z-index': 99999,
            },
            time: new Date().getTime(),
            months: [0,1,2,3,4,5,6,7,8,9,10,11],
            monthsDays: [31,28,31,30,31,30,31,31,30,31,30,31],
            weekdays: ['一', '二', '三', '四', '五', '六', '日'],
            month: new Date().getMonth(),
            d: new Date().getDate(),
            dateMatrix: [],
            callback: function() {}, //用于通知日期变更的回调函数，在openDatePicker时传入
        }
    },
    mounted: function() {
        console.log('time-picker mounted')
        this.styleValue = this.refreshStyle()
        let date = new Date(this.time)
        this.timeText = this.formatDate(date)
        this.arrangeDateMatrix(date)
    },
    watch: {
        show: function(val) {
            // console.log('new show: ' + val)
            if (!this.show) {
                this.style.display = 'none'
            } else {
                this.style.display = 'block'
            }
            this.styleValue = this.refreshStyle()
        },
        time: function(val) {
            // console.log('new time: ' + val)
            let date = new Date(val)
            this.timeText = this.formatTime(date)
            this.d = date.getDate()
            this.month = date.getMonth()
            if (this.callback) this.callback(this.timeText)
            this.arrangeDateMatrix(date)
        },
        month: function(val) {
            let date = new Date(this.time)
            if (this.d > this.monthsDays[val]) {
                //防止出现2月31日被解析成3月2日的情况
                this.d = this.monthsDays[val]
                date.setDate(this.d)
            }
            date.setMonth(val)
            this.time = date.getTime()
        }
    },
    methods: {
        refreshStyle: function() {
            let styleV = ''
            for (let key in this.style) {
                styleV += key + ':' + this.style[key] + ';'
            }
            return styleV
        },
        formatTime: function(time) {
            let date = new Date(time)
            return date.getFullYear()+'/'+(date.getMonth()+1)+'/'+date.getDate()
        },
        formatDate: function(date) {
            return date.getFullYear()+'/'+(date.getMonth()+1)+'/'+date.getDate()
        },
        isLeapYear: function(year) {
            //闰年的计算方法 https://www.liuxue86.com/a/3336530.html
            if (year % 4 != 0) return false
            if (year % 100 == 0 && year % 400 != 0) return false
            if (year % 3200 == 0) return false
            return true
        },
        fixFeburaryDays: function(year) {
            if (this.isLeapYear(year)) {
                this.monthsDays[1] = 29
            } else {
                this.monthsDays[1] = 28
            }
        },
        arrangeDateMatrix: function(date) {
            this.fixFeburaryDays(date.getFullYear())
            let dateMatrix = []
            let row = []
            date.setDate(1)
            let weekday = date.getDay()
            if (weekday === 0) weekday = 7 //JS里面周日记作0，这里为了补0方便就重置一下周日为7
            for (let j = 1; j < weekday; ++j) {
                row.push(0)
            }
            let maxDate = this.monthsDays[this.month]
            let i = 1
            while (i <= maxDate) {
                if (row.length == 7) {
                    dateMatrix.push(row)
                    row = []
                }
                row.push(i++)
            }
            while (row.length < 7) {
                row.push(0)
            }
            dateMatrix.push(row)
            this.dateMatrix = dateMatrix
        },
        changeYear: function(v) {
            let date = new Date(this.time)
            let year = date.getFullYear()
            date.setFullYear(year + v)
            this.time = date.getTime()
        },
        onMonthChange: function(event) {
            this.month = event.target.value
        },
        onDateChange: function(val) {
            this.d = val
            let date = new Date(this.time)
            date.setDate(val)
            this.time = date.getTime()
        },
        openDatePicker: function(param) {
            // console.log(param)
            let time
            if (undefined === param || null === param) {
                param = {
                    time: new Date().getTime(),
                    top: '0px',
                    left: '0px',
                }
            }
            // console.log('Number.isInteger(param.time): ', Number.isNaN(param.time))
            if (!Number.isInteger(param.time)) time = new Date().getTime()
            else time = param.time
            this.time = time
            this.style.top = param.top + 'px'
            this.style.left = param.left + 'px'
            this.callback = param.callback
            this.show = true
            this.styleValue = this.refreshStyle()
            if (this.callback) this.callback(this.formatTime(time))
        },
        onClosePicker: function() {
            this.show = false
        },
    },
})
